import React from "react";
import ReactDOM from "react-dom/client";
import { hook, useEffect, useState } from "./hook/index";

function App() {
    let [name, setName] = useState("ranmo");
    let [age, setAge] = useState(18);

    // 在函数组件中不能绑定事件，操作DOM, 定时器等副作用
    // 而 useEffect, 给函数组件增加了操作副作⽤的能⼒, 跟类组件 componentDidMount  componentDidUpdate  componentWillUpdate 有相同功能
    useEffect(() => {
        console.log("ok");

        // let timer = setInterval(() => {
        //     setAge(age + 1);
        // }, 1000);

        //! 注意可以有返回值为函数
        return () => {
            // clearTimeout(timer); // 返回函数中可以清除定时器，如果不清楚定时器则会造成多个
        };
    }, [age]); // 记录依赖值发送改变则除非函数, 空数组意味只执行一次

    return (
        <div>
            <h1>姓名: {name}</h1>
            <h2>年龄：{age}</h2>
            <input type="text" onChange={(e) => setName(e.target.value)} />
            <br></br>
            <br></br>
            <button onClick={() => setAge(age + 1)}> 增加</button>
        </div>
    );
}

const root = ReactDOM.createRoot(document.getElementById("root"));

export function render() {
    hook.index = 0; // 每次渲染都得重置指针从开头进行匹配, 不然进行 useState() 执行会在执行栈后面添加
    root.render(<App />);
}
render();
